<template>
	<view class="">
		<view class="top_bg ">
			<view class="top-width flex">
				<view class="left_widht" @click="go_back">
					<image class="left_img" src="../static/left.png" mode="widthFix"></image>
				</view>
				<view class="center-width">
					<view class="zichan_list">
						<view class="zichan_title" @click="choose_title(zichan)" v-for="(zichan,index) in zichanlists"
							:key="index" :current="current">
							<view :class="current == index ? 'size_xz' : 'size'">{{zichan.title_name}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 资产/负债 -->
		<view class="">
			<view class="zichan_bg_list">
				<view class="bg-jine flex">
					<view class="flex">
						<view class="jine-txt">金额</view>
						<input type="text" v-model="money" class="ipt_money" placeholder="请输入">
					</view>

					<view class="flex month">
						<uni-data-select v-model="value" :localdata="range" :clear="false"
							@change="change"></uni-data-select>
						<image class="rili" src="../../static/images/promotion/underneath.png.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="type-list">
					<view class="flex top-tit">
						<view class="title-lx">类型</view>
						<image class="setimg" @click="set_go" src="../static/set.png" mode="widthFix"></image>
					</view>
					<view class="sr_width">
						<view class="all-shop-pop flex">
							<view class="all-shop-width flex" :current="current1" @click="choose_type(index,item)"
								v-for="(item,index) in type_list" :key="index">
								<view :class="current1 == index ? 'data-list-xz flex' : 'data-list flex'">
									<view :class="current1 == index ? 'tit-top-xz' : 'tit-top'">{{item.name}}
									</view>
									<image class="duiimg" v-if="current1 == index" src="../static/xuan_z.png"
										mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
					<!-- 备注 -->
					<view class="">
						<view class="beizhu">备注</view>
						<view class="txtarea">
							<textarea name="" v-model="content" placeholder="请输入..." class="ipt" id="" cols="30"
								rows="10"></textarea>
						</view>
					</view>
					<view class="btn-list">
						<view class="qd_btn" @click="submit_txt">确定</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '', //选择现金、微信、支付宝平台
				range: [],
				money: '',
				current: 0, //选择收入还是支出
				zichanlists: [{
					id: 0,
					title_name: '其他收入'
				}, {
					id: 1,
					title_name: '其他支出'
				}],
				current1: 100, //选择类型
				type_list: [],
				content: '',
				id: '',
			};
		},
		onLoad() {
			this.getData()
			this.get_xianjin()
		},
		methods: {
			choose_title(e) {
				this.current = e.id
				this.content = ''
				this.money = ''
				this.id = ''
				this.value = ''
				this.getData()
			},
			get_xianjin() {
				this.$H.post('/v2/store/user/cashtype').then(res => {
					console.log("现金为数甚少", res);
					if (res.status.succeed == 1) {
						let a = []
						for (let s of res.data) {
							console.log("ssssssssss", s);
							a.push({
								value: s.id,
								text: s.value
							})
						}
						this.range = a
					}
				})
			},
			getData() {
				this.$H.post('/v2/store/user/inouttype', {
					type: this.current,
				}).then(res => {
					if (res.status.succeed == 1) {
						this.type_list = res.data
					}
					console.log("获取账户明细列表", res);
				})
			},

			change(e) {
				console.log("e:000000000", e);

			},
			set_go() {
				uni.navigateTo({
					url: '/pagesC/fuzhaibiao/add_type?type=' + this.current
				})
			},
			choose_type(e, item) {
				console.log("选择了第几个", e);
				this.id = item.inouttype_id
				this.current1 = e
			},
			go_back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 提交数据
			submit_txt() {
				this.$H.post('/v2/store/user/inouttypeshop/add', {
					inouttype_id: this.id,
					cashtype: this.value,
					money: this.money,
					content: this.content,
					type: this.current,
				}).then(res => {
					if (res.status.succeed == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})

					}
					console.log("获取账户明细列表", res);
				})
			},
		}
	};
</script>

<style>
	.qd_btn {
		width: 500rpx;
		background-color: #ff9a23;
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
		border-radius: 10rpx;
		margin: auto;
		margin-top: 100rpx;
		color: #fff;
		padding: 20rpx 0 20rpx 0;
	}

	.ipt {
		padding: 20rpx;
	}

	.txtarea {
		width: 690rpx;
		background-color: #eee;
		margin: 20rpx auto auto;
	}

	.beizhu {
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
		margin-top: 40rpx;
	}

	.duiimg {
		width: 40rpx;
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.tit-top-xz {
		font-size: 30rpx;
		color: #678ef4;
		font-weight: 600;
	}

	.tit-top {
		font-size: 30rpx;
		color: #9d9d9d;
		font-weight: 600;
	}

	.data-list-xz {
		width: 200rpx;
		position: relative;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #e6ebfe;
		justify-content: center;
	}

	.data-list {
		width: 200rpx;
		position: relative;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #f6f6f6;
		justify-content: center;
	}

	.all-shop-width {
		width: 33%;
		justify-content: center;
		padding-top: 20rpx;
	}

	.all-shop-pop {
		width: 700rpx;
		margin: auto;
		/* justify-content: space-between; */
		flex-wrap: wrap;
	}

	.sr_width {
		flex-wrap: wrap;
		width: 690rpx;
	}

	.top-tit {
		justify-content: space-between;
	}

	.type-list {
		margin-top: 40rpx;
	}

	.title-lx {
		font-size: 40rpx;
		color: #333;
		font-weight: 600;
	}

	.setimg {
		width: 50rpx;
		display: block;
	}

	.month {
		margin-right: 30rpx;
	}

	.jine-txt {
		font-size: 40rpx;
		color: #333;
		font-weight: 600;
		margin-left: 30rpx;
	}

	.ipt_money {
		width: 300rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #000;
		margin-top: 7rpx;
	}

	page {
		background-color: #fff !important;
	}

	.bg-jine {
		width: 690rpx;
		padding: 20rpx 0 20rpx 0;
		border-radius: 10rpx;
		background-color: #f6f6f6;
		margin: 30rpx auto auto;
		justify-content: space-between;
	}

	.rili {
		width: 40rpx;
		display: block;
	}

	.zichan_bg_list {
		width: 690rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin: 20rpx auto auto;
	}

	.zichan_title {
		margin: auto;
	}

	.zichan_list {
		/* width: 80%; */
		margin: 30rpx auto auto;
		display: flex;
		align-items: center;
	}

	.size {
		width: 150rpx;
		font-size: 35rpx;
		padding-bottom: 20rpx;
		color: #fff;
		margin: 0 30rpx 0 30rpx;
		text-align: center;
	}

	.size_xz {
		padding-bottom: 20rpx;
		width: 150rpx;
		text-align: center;
		margin: 0 30rpx 0 30rpx;
		font-weight: 600;
		border-bottom: 2px solid #fff;
		font-size: 35rpx;
		color: #ffff;
	}

	.title-name {
		font-size: 35rpx;
		color: #fff;
		font-weight: 600;
	}

	.center-width {
		width: 60%;
		justify-content: space-between;
	}

	.left_widht {
		width: 20%;
	}

	/deep/.uni-select__input-text {
		font-size: 40rpx !important;
		font-weight: 600 !important;
	}

	/deep/.uni-select {
		border: none !important;
	}

	/deep/.uni-select__selector-empty,
	.uni-select__selector-item {
		line-height: 60rpx !important;
		padding: 0rpx 7rpx !important;
	}

	.top-width {
		width: 690rpx;
		padding-bottom: 20rpx;
		margin: 70rpx auto auto;
	}

	.left_img {
		width: 40rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}


	.top_bg {
		width: 750rpx;
		display: flex;
		align-items: center;
		background-color: #ff9a23;
	}
</style>